/* eslint-disable array-callback-return */

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Button, Modal, Form, Select, message } from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    dataSource: [
      {
        id: 1,
        course_name: '编程语言',
        course_logo:
          'https://img.yzcdn.cn/v2/image/1608354976/c2a9f0e8-d4b8-444d-9088-404404405388.png',
      },
      {
        id: 2,
        course_name: 'HTML编程(暂未开通)',
        course_logo:
          'https://img.yzcdn.cn/v2/image/1608354976/c2a9f0e8-d4b8-444d-9088-404404405388.png',
      },
    ],
  }
  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  handleSaveBtn = (values) => {
    this.setState({ initialValues: values })
    this.onChangeCurPageOrPageSize(1, 10)
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
      ...this.state.initialValues,
    }
    post('dashboard/student/resource/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        // this.setState({ dataSource: res.data.concat(res.data).concat(res.data), total: res.size })
      }
    })
  }
  modal = (item) => {
    if (item.id == 1) {
      this.props.history.push('/programming/0')
    } else {
    }
  }
  // 随机数
  getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  render() {
    const { i18n } = this.props
    const { dataSource } = this.state

    return (
      <div>
        <div style={{ position: 'relative' }}>
          <div
            style={{
              display: 'flex',
              width: '100%',
              justifyContent: 'center',
              zIndex: 5,
              position: 'relative',
              marginBottom: '70px',
            }}
          >
            <div>
              <img
                style={{
                  width: '100%',
                  height: '700px',
                }}
                alt=""
                src={require('../../imges/NL1.png')}
              />
            </div>
            <div>
              <img
                style={{
                  width: '100%',
                  height: '700px',
                }}
                alt=""
                src={require('../../imges/NL2.png')}
              />
            </div>
          </div>
          <div className="TopBuy">
            <img
              style={{
                width: '424px',
                height: '80px',
              }}
              alt=""
              src={require('../../imges/mc.png')}
            />
            <div className="zit1">编程工具</div>
          </div>
          <div
            style={{
              position: 'absolute',
              top: '20px',
              width: '100%',
              zIndex: 5,
            }}
          >
            <div
              className="Nl1"
              onClick={() => this.modal(item)}
              style={{ cursor: 'pointer' }}
            >
              {dataSource.map((item) => {
                return (
                  <div className="buhy22">
                    <div style={{ margin: '30px auto 0px' }}>
                      <img
                        style={{
                          width: '256px',
                          height: '172px',
                        }}
                        alt=""
                        src={require('../../imges/' +
                          this.getRandomInt(1, 50) +
                          '.png')}
                      />
                    </div>
                    <div className="zit">{item.course_name}</div>
                  </div>
                )
              })}
            </div>
          </div>
          <div className="dby">
            <div>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db11.png')}
              />
            </div>
            <div>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db12.png')}
              />
            </div>
          </div>
        </div>
        <div>
          <div
            style={{
              display: 'flex',
              position: 'relative',
              bottom: '0px',
              width: '100%',
            }}
          >
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db2.png')}
              />
            </div>
            <div style={{ width: '60%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db3.png')}
              />
            </div>
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db1.png')}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
Command.propTypes = {}
export default Command
